<blockquote class="layui-elem-quote" style="background: #fff;">
	说明：为系统用户授权角色。
</blockquote>
<div class="layui-row layui-col-space15" style="height: 100%;">
	<div class="layui-col-md5"  style="height: 100%;">
		<div class="layui-card" style="height: 100%;">
			<div class="layui-card-header">
		        <h2 class="header-title">角色列表</h2>
		    </div>
		    <div class="layui-card-body" style="padding-top: 0px;">
		        <table class="layui-table" id="role-table" lay-filter="role-table"></table>
		    </div>
		</div>
	</div>
	<div class="layui-col-md7"  style="height: 100%;">
		<div class="layui-card" style="height: 100%;">
	    	<div class="layui-card-header">
		        <h2 class="header-title">用户列表</h2>
		        <div class="layui-btn-group" style="float: right">
		            <button class="layui-btn layui-btn-sm" id="btnAuthorizeRole"><i class="layui-icon">&#xe672;</i> 确认授权</button>
		        </div>
		    </div>
		    <div class="layui-card-body" style="padding-top: 0px;">
		        <table class="layui-table" id="user-table" lay-filter="user-table"></table>
		    </div>
		</div>
	</div>
</div>

<!-- 是否启用列 -->
<script type="text/html" id="isEnableTpl">
    {{#  if(d.isEnable === '0'){ }}
        <span class="layui-badge layui-bg-gray">{{ d.isEnableText }}</span>
    {{#  } else if(d.isEnable === '1'){ }}
        <span class="layui-badge-rim">{{ d.isEnableText }}</span>
    {{#  } }}
</script>

<script>
    layui.use(['jquery', 'table', 'util', 'sadmin', 'element'], function () {
        var $ = layui.$ //重点处
        var table = layui.table;
        var util = layui.util;
        var sadmin = layui.sadmin;
        var element = layui.element;

        // 渲染角色表格
        table.render({
            elem: '#role-table',
            url: 'system/role/pageList',
            skin: 'line',
            page: true,
            cols: [
                [
                	{type: 'radio'},
                    {type: 'numbers', title: '序号'},
                    {field: 'roleName', sort: true, title: '角色名称'},
                    {field: 'roleTypeText', width: 100, align: 'center', title: '角色类型'}
                ]
            ]
        });
        
        // 监听角色选中事件
        table.on('radio(role-table)', function(obj){
       	  console.log(obj.checked); //当前是否选中状态
       	  console.log(obj.data); //选中行的相关数据
       	  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
       	  
	       	table.reload('user-table', {
	            where: {
	            	rolePid: obj.data.pid
	            },
	       		page: {
	                curr: 1 //重新从第 1 页开始
	            }
	        });
       	});

		// 渲染用户表格
		table.render({
			elem : '#user-table',
			url : 'system/user/pageListByRole',
			skin : 'line',
			page : true,
			cols : [ [ {
				type : 'checkbox',
				fixed : 'left'
			}, {
				type : 'numbers',
				title : '序号'
			}, {
				field : 'loginName',
				sort : true,
				title : '登录名称'
			}, {
				field : 'userName',
				sort : true,
				title : '用户名称'
			}, {
				field : 'mobileNo',
				align : 'center',
				title : '手机号码'
			}, {
				field : 'isEnableText',
				width : 100,
				align : 'center',
				title : '是否启用',
				templet : '#isEnableTpl'
			} ] ]
		});
		
		// 添加按钮确认授权点击事件
        $('#btnAuthorizeRole').click(function () {
            var selectRoleRow = table.checkStatus('role-table');
            if (selectRoleRow.data.length == 0) {
            	layer.msg("请选择要授权的角色");
            	return;
            }
            var selectUserRows = table.checkStatus('user-table');
            if (selectUserRows.data.length == 0) {
            	layer.msg("请选择要授权的用户");
            	return;
            }
            var roleUserIdArr = [];
            var selectUserRowsData = selectUserRows.data;
            for (var i=0; i< selectUserRowsData.length; i++) {
            	roleUserIdArr.push(selectUserRowsData[i].pid);
            }
            
            var data = {rolePid: selectRoleRow.data[0].pid, userPids: roleUserIdArr.join(",")};
            $.post("/system/roleuser/saveRoleUser", data, function (result) {
                layer.closeAll('loading');
                layer.msg(result.msg);
            });
        });
	});
</script>